<template>
    <div class="layui-tab layui-tab-brief contL" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this hidden-xs-only"><i class="layui-icon layui-icon-form"></i>文章</li>
            <li class="hidden-sm-and-up"><i class="layui-icon layui-icon-form"></i>最新发布</li>
            <li class="hidden-xs-only"><i class="layui-icon layui-icon-dialogue"></i>最新评论</li>
            <li class="layui-this hidden-sm-and-up"><i class="layui-icon layui-icon-form"></i>最新评论</li>
            <li class="hidden-xs-only"><i class="layui-icon layui-icon-notice"></i>动态</li>
            <li class=""><i class="layui-icon layui-icon-fire"></i>热门</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item">
                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                    <a href="">张三</a>
                    <span>关注了作者 · 05.29 11:09</span>
                </div>
                <div id="zxj-aj">
                    <div style="margin-bottom:20px;">
                        <a href=""><img src="../../assets/images/zxj5.jpg" alt=""></a>
                        <a style="font-size:17px;line-height:30px;">张三8888</a><br>
                        <span style="font-size:12px;color:#969696">写了 52988 字，被 320 人关注，获得了 359 个喜欢</span>
                        <button type="button" class="guanzhuBtn" v-if="IsShows2" @click="changBtn"><span><i class=""></i>已关注</span></button>
                        <p class="el-icon-plus JiaGZh" v-else @click="changBtn">关注</p>
                    </div>

                    <hr>
                    <div style="margin-top:20px;color:#969696;font-size:12px;">
                        从一个糟糕的人开始做起，你会发现一直在朝着精彩的人生奔跑。
                    </div>
                </div>
                <hr>
                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                    <a href="">张三8888</a>
                    <span>关注了作者 · 05.29 11:09</span>
                </div>
                <p style="margin-bottom:20px;">可以分享代码吗？</p>
                <div id="zxj-ah">
                    <a href="">张三8888</a>
                    <span>来自于</span>
                    <a href="">thinkphp 5.0简单的删除数据表中一条数据学习笔记之六</a>
                </div>
                <hr>
                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                    <a href="">张三8888</a>
                    <span>关注了作者 · 05.29 11:09</span>
                </div>
                <p style="margin-bottom:20px;">可以分享代码吗？</p>
                <div id="zxj-ai">
                    <a href="">thinkphp 5.0简单的删除数据表中一条数据学习笔记之六</a>
                    <p>在user.php中增加如下代码用于打开del.html编写的函数为del()；
                        编写的delete()函数是用于删除指定主键值的数据记录； 注意：delete()函数中的$u...</p>
                    <div id="zxj-ag">
                        <a href="">小冕</a>
                        <a href=""><i class="el-icon-view"></i>252</a>
                        <a href=""><i class="el-icon-chat-square"></i>2</a>
                    </div>
                </div>
                <hr>
                <div style="line-height:25px;">
                    <el-row :gutter="20">
                        <el-col :span="18">
                            <div class="grid-content bg-purple" style="">
                                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                                    <a href="">张三8888</a>
                                    <span>关注了作者 · 05.29 11:09</span>
                                </div>
                                <a href="" style="font-size:18px;color:#969696;">thinkphp 5.0简单的删除数据表中一条数据学习笔记之六</a>
                                <p style="font-size:13px;color:#999999;">
                                    在user.php中增加如下代码用于打开del.html编写的函数为del()；编写的delete()函数是用于删除指定主键值的数据记录；
                                    注意：delete()函数中的$u...</p>
                                <div id="zxj-ag">
                                    <a href="">小冕</a>
                                    <a href=""><i class="el-icon-view"></i>252</a>
                                    <a href=""><i class="el-icon-chat-square"></i>2</a>
                                </div>

                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light" style="margin-top:20px;">
                                <img src="../../assets/images/zxj3.jpg" alt="">

                            </div>
                        </el-col>
                    </el-row>
                    <hr>
                </div>
                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                    <a href="">张三8888</a>
                    <span>关注了作者 · 05.29 11:09</span>
                </div>
                <div id="zxj-aj">
                    <div style="margin-bottom:20px;">
                        <a href=""><img src="../../assets/images/zxj5.jpg" alt=""></a>
                        <a style="font-size:17px;line-height:30px;">李四9999</a><br>
                        <span style="font-size:12px;color:#969696">写了 52988 字，被 320 人关注，获得了 359 个喜欢</span>
                        <button type="button" class="guanzhuBtn" v-if="IsShows3" @click="changBtn2"><span><i class=""></i>已关注</span></button>
                        <p class="el-icon-plus JiaGZh" v-else @click="changBtn2">关注</p>
                    </div>

                    <hr>
                    <div style="margin-top:20px;color:#969696;font-size:12px;">
                        从一个糟糕的人开始做起，你会发现一直在朝着精彩的人生奔跑。
                    </div>
                </div>
                <hr>
                <div style="line-height:25px;">
                    <el-row :gutter="20">
                        <el-col :span="18">
                            <div class="grid-content bg-purple" style="">
                                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                                    <a href="">张三8888</a>
                                    <span>关注了作者 · 05.29 11:09</span>
                                </div>
                                <a href="" style="font-size:18px;color:#969696;">thinkphp 5.0简单的删除数据表中一条数据学习笔记之六</a>
                                <p style="font-size:13px;color:#999999;">
                                    在user.php中增加如下代码用于打开del.html编写的函数为del()；编写的delete()函数是用于删除指定主键值的数据记录；
                                    注意：delete()函数中的$u...</p>
                                <div id="zxj-ag">
                                    <a href="">小冕</a>
                                    <a href=""><i class="el-icon-view"></i>252</a>
                                    <a href=""><i class="el-icon-chat-square"></i>2</a>
                                </div>

                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light" style="margin-top:20px;">
                                <img src="../../assets/images/zxj3.jpg" alt="">

                            </div>
                        </el-col>
                    </el-row>
                    <hr>
                </div>


            </div>
            <div class="layui-tab-item hidden-sm-and-up">最新发布</div>
            <div class="layui-tab-item hidden-xs-only">最新评论</div>
            <div class="layui-tab-item layui-show">
                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                    <a href="">这个名字可以吧</a>
                    <span>关注了作者 · 05.29 11:09</span>
                </div>
                <div id="zxj-aj">
                    <div style="margin-bottom:20px;">
                        <a href=""><img src="../../assets/images/zxj5.jpg" alt=""></a>
                        <a style="font-size:17px;line-height:30px;">张三8888</a><br>
                        <span style="font-size:12px;color:#969696">写了 52988 字，被 320 人关注，获得了 359 个喜欢</span>
                        <button type="button" class="guanzhuBtn" v-if="IsShows2" @click="changBtn"><span><i class=""></i>已关注</span></button>
                        <p class="el-icon-plus JiaGZh" v-else @click="changBtn">关注</p>
                    </div>

                    <hr>
                    <div style="margin-top:20px;color:#969696;font-size:12px;">
                        从一个糟糕的人开始做起，你会发现一直在朝着精彩的人生奔跑。
                    </div>
                </div>
                <hr>
                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                    <a href="">张三8888</a>
                    <span>关注了作者 · 05.29 11:09</span>
                </div>
                <p style="margin-bottom:20px;">可以分享代码吗？</p>
                <div id="zxj-ah">
                    <a href="">张三8888</a>
                    <span>来自于</span>
                    <a href="">thinkphp 5.0简单的删除数据表中一条数据学习笔记之六</a>
                </div>
                <hr>
                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                    <a href="">张三8888</a>
                    <span>关注了作者 · 05.29 11:09</span>
                </div>
                <p style="margin-bottom:20px;">可以分享代码吗？</p>
                <div id="zxj-ai">
                    <a href="">thinkphp 5.0简单的删除数据表中一条数据学习笔记之六</a>
                    <p>在user.php中增加如下代码用于打开del.html编写的函数为del()；
                        编写的delete()函数是用于删除指定主键值的数据记录； 注意：delete()函数中的$u...</p>
                    <div id="zxj-ag">
                        <a href="">小冕</a>
                        <a href=""><i class="el-icon-view"></i>252</a>
                        <a href=""><i class="el-icon-chat-square"></i>2</a>
                    </div>
                </div>
                <hr>
                <div style="line-height:25px;">
                    <el-row :gutter="20">
                        <el-col :span="18" :xs="24">
                            <div class="grid-content bg-purple" style="">
                                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                                    <a href="">张三8888</a>
                                    <span>关注了作者 · 05.29 11:09</span>
                                </div>
                                <a href="" style="font-size:18px;color:#969696;">thinkphp 5.0简单的删除数据表中一条数据学习笔记之六</a>
                                <p style="font-size:13px;color:#999999;">
                                    在user.php中增加如下代码用于打开del.html编写的函数为del()；编写的delete()函数是用于删除指定主键值的数据记录；
                                    注意：delete()函数中的$u...</p>
                                <div id="zxj-ag">
                                    <a href="">小冕</a>
                                    <a href=""><i class="el-icon-view"></i>252</a>
                                    <a href=""><i class="el-icon-chat-square"></i>2</a>
                                </div>

                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light" style="margin-top:20px;">
                                <img src="../../assets/images/zxj3.jpg" alt="">

                            </div>
                        </el-col>
                    </el-row>
                    <hr>
                </div>
                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                    <a href="">张三8888</a>
                    <span>关注了作者 · 05.29 11:09</span>
                </div>
                <div id="zxj-aj">
                    <div style="margin-bottom:20px;">
                        <a href=""><img src="../../assets/images/zxj5.jpg" alt=""></a>
                        <a style="font-size:17px;line-height:30px;">李四9999</a><br>
                        <span style="font-size:12px;color:#969696">写了 52988 字，被 320 人关注，获得了 359 个喜欢</span>
                        <button type="button" class="guanzhuBtn" v-if="IsShows3" @click="changBtn2"><span><i class=""></i>已关注</span></button>
                        <p class="el-icon-plus JiaGZh" v-else @click="changBtn2">关注</p>
                    </div>

                    <hr>
                    <div style="margin-top:20px;color:#969696;font-size:12px;">
                        从一个糟糕的人开始做起，你会发现一直在朝着精彩的人生奔跑。
                    </div>
                </div>
                <hr>
                <div style="line-height:25px;margin-bottom: 80px">
                    <el-row :gutter="20">
                        <el-col :span="18" :xs="24">
                            <div class="grid-content bg-purple" style="">
                                <div id="zxj-ae" style="width:100%;height:30px;margin-top:20px;">
                                    <a href=""><img src="../../assets/images/zxj1.jpg" alt=""></a>
                                    <a href="">张三8888</a>
                                    <span>关注了作者 · 05.29 11:09</span>
                                </div>
                                <a href="" style="font-size:18px;color:#969696;">thinkphp 5.0简单的删除数据表中一条数据学习笔记之六</a>
                                <p style="font-size:13px;color:#999999;">
                                    在user.php中增加如下代码用于打开del.html编写的函数为del()；编写的delete()函数是用于删除指定主键值的数据记录；
                                    注意：delete()函数中的$u...</p>
                                <div id="zxj-ag">
                                    <a href="">小冕</a>
                                    <a href=""><i class="el-icon-view"></i>252</a>
                                    <a href=""><i class="el-icon-chat-square"></i>2</a>
                                </div>

                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light" style="margin-top:20px;">
                                <img src="../../assets/images/zxj3.jpg" alt="">

                            </div>
                        </el-col>
                    </el-row>
                    <hr>
                </div>


            </div>
            <div class="layui-tab-item hidden-xs-only">动态</div>
            <div class="layui-tab-item">热门</div>
        </div>
    </div>
</template>
<style scoped>
    .layui-tab-brief {
        color: #969696;
    }

    .layui-tab-brief ul li i {
        padding-right: 10px;

    }

    #zxj-ae {
        margin-bottom: 10px;
    }

    #zxj-ae img {
        width: 24px;
        height: 24px;
        margin-top: 3px;
        margin-right: 10px;
        border-radius: 50%;
        float: left;
    }

    #zxj-ae p {
        line-height: 30px;
        font-size: 13px;
        float: left;
    }

    #zxj-ae span {
        font-size: 13px;
        padding-left: 10px;
        line-height: 30px;
        color: #969696;

    }

    #zxj-aj {
        padding: 10px;
        background-color: hsla(0, 0%, 71%, .1);
        border: 1px solid #e1e1e1;
        border-radius: 4px;
        margin-bottom: 20px;
        font-size: 12px;
    }

    #zxj-aj img {
        width: 48px;
        height: 48px;
        float: left;
        margin-right: 20px;
        border-radius: 50%;
    }

    #zxj-aj button {
        width: 110px;
        height: 40px;
        font-size: 18px;
        text-align: center;
        color: #8c8c8c;
        float: right;
        background-color: hsla(0, 0%, 71%, .1);
        position: relative;
        margin-top: -25px;
        border: 1px solid hsla(0, 0%, 59%, .6);
        border-radius: 40px;
    }

    #zxj-aj button:hover span {
        display: none
    }

    #zxj-aj button:hover:before {
        content: "取消关注"
    }


    .el-icon-plus {
        font-size: 18px;
        color: #8c8c8c;
    }

    #zxj-ah {
        padding: 10px 20px;
        border-left: 6px solid #d9d9d9;
    }

    #zxj-ah span {
        color: #969696;
        margin: 0 10px;

    }

    #zxj-ai {
        padding: 10px 20px;
        line-height: 30px;
        margin-bottom: 15px;
        border-left: 6px solid #d9d9d9;
    }

    #zxj-ai a {
        font-size: 15px;
        font-weight: 700;
        color: #969696;
    }

    #zxj-ai p {
        font-size: 13px;
        color: #999999;
    }

    #zxj-ag a {
        font-size: 12px;
        color: #969696;
        margin-right: 10px;
    }

    .JiaGZh {
        position: absolute;
        left: 54%;
        background-color: #e6e6e6;
        margin-top: -25px;
        transform: translateX(-50%);
        z-index: 5!important;
        font-size: 20px;
        font-weight: 500;
        color: #42c02e;
        border: 1px solid #42c02e;
        border-radius: 50px;
        padding: 9px 24px;
        cursor: pointer;
    }
    .JiaGZh:hover {
        background-color: #42c02e;
        color: #fff;
    }
    @media screen and (max-width: 750px) {
        .yd-MyCbtn {
            line-height: 0;
            font-size: 13px !important;
            width: 90px !important;
            height: 30px !important;
            margin-top: -50px !important;
        }

        .yd-MyCbtn span i {
            font-size: 13px;
        }
    }
</style>


<script>
    // import Footers from '../Footers'
    export default {
        data() {
            return {
                IsShows2:true,
                IsShows3:true,
                activeName: 'first'
            };
        },
        methods: {
            // handleClick(tab, event) {
            //   console.log(tab, event);
            // }
            changBtn(){
                this.IsShows2=!this.IsShows2
            },
            changBtn2(){
                this.IsShows3=!this.IsShows3
            },
        },
        components: {
            // Footers
        }
    };
</script>

